<template>
    <div>
        <van-sticky>
            <van-tabs v-model:active="tabActive" background="#b4b4b4" class="tab-aaa">
                <van-tab name="a" title="播放" />
                <van-tab name="b" title="平铺" />
            </van-tabs>
        </van-sticky>
        <div v-if="tabActive == 'a'">
            <p class="h3-11" v-if="list[playIndex]">{{ list[playIndex].time }}</p>
            <div class="pic-img">
                <img :style="picWidth" :src="list[playIndex].url" v-if="list[playIndex]" />
            </div>

            <div class="scroll-box" >
                <div class="sssss" id="sssss"> 
                    <div class="img-box-item" v-for="(item, index) in list" @click="playIndex = index"
                        :class="{ active: index == playIndex }">
                        <img :src="item.url" />
                        <p>{{ item.time }}</p>
                    </div>
                </div>
            </div>

            <div class="play-btn-g">
                <van-button type="primary" @click="s = s > 1 ? s - 0.25 : 1" :disabled="s == 1">缩小</van-button>
                <van-button type="primary" @click="s = 1">重置</van-button>
                <van-button type="primary" @click="s = s + 0.25">放大</van-button>
            </div>

            <div class="play-btn-g">
                <van-button type="primary" @click="playIndex--" :disabled="playIndex == 0">上一个</van-button>
                <van-button v-if="!timer" type="primary" @click="play_rand()"
                    :disabled="playIndex >= list.length - 1">播放</van-button>
                <van-button v-else type="primary" @click="clearTimer()">暂停</van-button>
                <van-button type="primary" @click="playIndex++" :disabled="playIndex >= list.length - 1">下一个</van-button>
            </div>
        </div>
        <div v-if="tabActive == 'b'">
            <div class="img-222" v-for="(item, index) in list">
                <p>{{ item.time }}</p>
                <img :src="item.url" />
            </div>
        </div>

       <link-botton-group></link-botton-group>
    </div>
</template>


<script>
    import { getPassRainList } from "@/api/getPassRain";
    //import getWeather  from  '@/api/getGdWeather'
    export default {
        data() {
            var menusList = [{ title: "首页", path: "/" }];
            return {
                fore: {},
                list: [],
                tabActive: "a",
                playIndex: 0,
                menusList,
                interval: 0.5,
                timer: false,
                s: 1,
            };
        },
        created() {
            this.initData();
        },
        mounted() { },
        computed: {
            picWidth() {
                return "width:" + this.s * 100 + "%";
            },
        },
        watch: {},
        methods: {
            clearTimer() {
                clearInterval(this.timer); this.timer = false;
            },
            initData() {
                this.list = getPassRainList(72).reverse();
            },
            play_rand() {
                this.timer = setInterval(() => {
                    if (this.playIndex >= this.list.length - 1) {
                        clearInterval(this.timer);
                        this.timer = false;
                        return;
                    }
                    document.getElementById("sssss").scrollLeft = this.playIndex*100;
                    this.playIndex++;
                }, this.interval * 1000);
            },
        },
    };
</script>

<style scoped>
    .h3-11 {
        font-size: 18px;
        text-align: center;
    }

    .sssss {
        /* display: flex; */
        white-space: nowrap;
        overflow-x: auto;

    }

    .img-box-item {
        display: inline-block;
        width: 90px;
        /* height: 80px; */
        margin: 5px;
        text-align: center;
    }

    .img-box-item img {
        width: 100%;
        display: block;
    }

    .scroll-box {
        overflow-x: hidden;
    }

    .img-big {
        width: 100%;
        overflow: auto;
    }

    .img-big img {
        width: 100%;
    }

    .img-box-item.active img {
        border: 1px solid red;
    }

    .img-222 img {
        width: 100%;
        /* margin-bottom: 10px; */
        /* margin: 9px; */
    }

    .img-222 {
        margin: 10px;
    }

    .img-222 p {
        margin-bottom: 0;
        margin-top: 30px;
        font-size: 18px;
    }

    .play-btn-g {
        display: flex;
        justify-content: space-evenly;
        margin-top: 30px;
    }

    .pic-img {
        height: 90vw;
        overflow: auto;
    }

    .img-box-item p {
        Word-break: break-word;
        display: block;
        line-height: 1.5;
        height: 40px;
        /* overflow: hidden; */
        white-space: normal;
    }
</style>